<template>
  <div class="xtx-checkbox" @click="changeChecked">
    <i class="iconfont" :class="modelValue ? 'icon-checked' : 'icon-unchecked'"/>
    <!-- <span v-if="$slots.default" > <slot /> </span> -->
    <span>{{label}}</span>
  </div>
  </template>

<script setup name="XtxCheckbox">
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
    require: true
  },
  label: String
})
const emit = defineEmits(['update:modelValue', 'handleChanged'])
const changeChecked = () => {
  emit('update:modelValue', !props.modelValue)
  emit('handleChanged', !props.modelValue)
}
</script>

  <style scoped lang="less">
  .xtx-checkbox {
    display: inline-block;
    margin-right: 2px;
    cursor: pointer;
    user-select: none;
    .icon-checked {
      color: @xtxColor;
      ~ span {
        color: @xtxColor;
      }
    }
    i {
      position: relative;
      top: 1px;
    }
    span {
      margin-left: 2px;
    }
  }
  </style>